<template>
  <ElCard class="filter-panel" shadow="never">
    <template #header>
      <div class="filter-header">
        <span class="filter-title">
          <ElIcon><Filter /></ElIcon>
          筛选条件
        </span>
        <ElButton text type="primary" @click="handleReset">
          重置
        </ElButton>
      </div>
    </template>
    
    <div class="filter-content">
      <!-- 分类筛选 -->
      <div v-if="categories && categories.length > 0" class="filter-section">
        <div class="section-title">分类</div>
        <ElCheckboxGroup v-model="selectedCategories" @change="handleChange">
          <ElCheckbox
            v-for="category in categories"
            :key="category.value"
            :label="category.value"
          >
            {{ category.label }}
          </ElCheckbox>
        </ElCheckboxGroup>
      </div>
      
      <!-- 标签筛选 -->
      <div v-if="tags && tags.length > 0" class="filter-section">
        <div class="section-title">标签</div>
        <div class="tags-wrapper">
          <ElCheckTag
            v-for="tag in tags"
            :key="tag"
            :checked="selectedTags.includes(tag)"
            @change="handleTagChange(tag)"
          >
            {{ tag }}
          </ElCheckTag>
        </div>
      </div>
      
      <!-- 日期范围 -->
      <div v-if="showDateRange" class="filter-section">
        <div class="section-title">日期范围</div>
        <ElDatePicker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleChange"
        />
      </div>
      
      <!-- 排序方式 -->
      <div v-if="sortOptions && sortOptions.length > 0" class="filter-section">
        <div class="section-title">排序方式</div>
        <ElRadioGroup v-model="sortBy" @change="handleChange">
          <ElRadio
            v-for="option in sortOptions"
            :key="option.value"
            :label="option.value"
          >
            {{ option.label }}
          </ElRadio>
        </ElRadioGroup>
      </div>
    </div>
  </ElCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Filter } from '@element-plus/icons-vue'

const props = defineProps({
  // 分类选项
  categories: {
    type: Array,
    default: () => []
  },
  // 标签选项
  tags: {
    type: Array,
    default: () => []
  },
  // 排序选项
  sortOptions: {
    type: Array,
    default: () => []
  },
  // 是否显示日期范围
  showDateRange: {
    type: Boolean,
    default: false
  },
  // 默认选中的分类
  defaultCategories: {
    type: Array,
    default: () => []
  },
  // 默认选中的标签
  defaultTags: {
    type: Array,
    default: () => []
  },
  // 默认排序
  defaultSort: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['change', 'reset'])

const selectedCategories = ref([...props.defaultCategories])
const selectedTags = ref([...props.defaultTags])
const dateRange = ref(null)
const sortBy = ref(props.defaultSort)

// 处理标签选择
const handleTagChange = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tag)
  }
  handleChange()
}

// 筛选条件变化
const handleChange = () => {
  emit('change', {
    categories: selectedCategories.value,
    tags: selectedTags.value,
    dateRange: dateRange.value,
    sortBy: sortBy.value
  })
}

// 重置筛选
const handleReset = () => {
  selectedCategories.value = []
  selectedTags.value = []
  dateRange.value = null
  sortBy.value = props.defaultSort
  emit('reset')
  handleChange()
}

// 监听默认值变化
watch(() => props.defaultCategories, (newVal) => {
  selectedCategories.value = [...newVal]
}, { deep: true })

watch(() => props.defaultTags, (newVal) => {
  selectedTags.value = [...newVal]
}, { deep: true })

watch(() => props.defaultSort, (newVal) => {
  sortBy.value = newVal
})
</script>

<style lang="scss" scoped>
.filter-panel {
  :deep(.el-card__header) {
    padding: $spacing-md $spacing-lg;
  }
  
  :deep(.el-card__body) {
    padding: $spacing-lg;
  }
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-title {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  font-weight: $font-weight-semibold;
  font-size: $font-size-base;
}

.filter-content {
  display: flex;
  flex-direction: column;
  gap: $spacing-xl;
}

.filter-section {
  .section-title {
    font-weight: $font-weight-medium;
    margin-bottom: $spacing-md;
    color: var(--text-primary);
  }
  
  .el-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
  }
  
  .el-radio-group {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
  }
  
  .el-date-picker {
    width: 100%;
  }
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-sm;
}
</style>

